<template>
    <el-main>
    <!-- 条件查询区域  -->
      <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh-right">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children'}"
      >
        <el-table-column prop="departmentName" label="部门名称"></el-table-column>
        <el-table-column prop="parentName" label="所属部门"></el-table-column>
        <el-table-column prop="phone" label="部门电话"></el-table-column>
        <el-table-column prop="address" label="部门地址"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit-outline"
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              icon="el-icon-close"
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加和编辑部门窗口 -->
      <system-dialog
        :title="deptDialog.title"
        :visible="deptDialog.visible"
        :width="deptDialog.width"
        :height="deptDialog.height"
        @onClose="onClose"
        @onConfirm="onConfirm"
      >
        <div slot="content">
          <el-form
            :model="dept"
            ref="deptForm"
            :rules="rules"
            label-width="80px"
            :inline="true"
            size="small"
          >
            <el-form-item label="所属部门" prop="parentName">
              <!--  改成combotree的形式，减少不必要的弹窗   -->
              <combotree :parentNode="parentNode" @combotreeNodeSelected="combotreeNodeSelected"></combotree>
            </el-form-item>
            <el-form-item label="部门名称" prop="departmentName" style="margin-left: -15px">
              <el-input v-model="dept.departmentName"></el-input>
            </el-form-item>
            <el-form-item label="部门电话">
              <el-input v-model="dept.phone"></el-input>
            </el-form-item>
            <el-form-item label="部门地址">
              <el-input v-model="dept.address"></el-input>
            </el-form-item>
            <el-form-item label="序号">
              <el-input v-model="dept.orderNum"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </system-dialog>
    </el-main>
</template>

<script>
  import departmentApi from '@/api/department';
  import systemDialog from '@/components/System/SystemDialog';
  import combotree from '@/components/Form/combotree';
  export default {
    name: "department",
    components: {
      systemDialog,
      combotree
    },
    data(){
          return{
            //上级所属部门，编辑时传给combotree子组件
            parentNode:{},
            searchModel:{
              departmentName:""
            },
            //部门窗口属性
            deptDialog: {
              title: "新增部门",
              visible: false, //是否显示
              width: 580,
              height: 170,
            },
            //部门对象
            dept: {
              id: "",
              pid: "",
              parentName: "",
              departmentName: "",
              address: "",
              phone: "",
              orderNum: "",
            },
            //表单验证规则
            rules: {
              parentName: [{ required: true, trigger: "change", message: "请选择所属部门"}],
              departmentName: [{ required: true, trigger: "blur", message: "请输入部门名称" }],
              },
            conout:1,
            tableData:[],
          };
      },
    created() {
        this.search();
      },
    methods:{
        async search(){
          let res = await departmentApi.getDepartmentList(this.searchModel);
          if(res.code == 200){
            this.tableData = res.data;
          }
        },
        handleEdit(row) {
          //回填原有数据,浅拷贝
          this.dept = {...row}
          this.parentNode = {id:row.pid,departmentName:row.parentName}
          this.deptDialog.title = "编辑部门";
          this.deptDialog.visible = true;
        },
        async handleDelete(row) {
          //删除前先检查部门下是否有子部门或用户
          let res = await departmentApi.checkDept({id:row.id});
          //判断是否能删除
          if(res.exist){//下面存在子部门或用户不能删除
            this.$message.warning(res.msg);
          }else{
            //确认删除
            let confirm = await this.$myconfirm("确认要删除该数据吗:");
            if(confirm){
              let res = await departmentApi.delDept({id:row.id});
              if(res.code === 200){
                this.$message.success(res.msg);
                this.search();
              }else{
                this.$.error(res.msg);
              }
            }
          }
          },
      /**
       * 弹窗取消事件
       */
      onClose() {
      //关闭窗口
        this.deptDialog.visible = false;
      },
      /**
       * 弹窗确认事件
       */
      onConfirm() {
      //表单验证
        this.$refs.deptForm.validate(async (valid) => {
          //如果验证通过
          if (valid) {
            //add接口
            let res = null;
            //判断是新增还是修改
            if(this.dept.id === ''){
              res = await departmentApi.addDept(this.dept);
            }else{
              res = await departmentApi.updateDept(this.dept);
            }
            if(res.code === 200){
              this.$message.success(res.msg);
              //刷新数据
              this.search();
              //关闭窗口
              this.deptDialog.visible = false;
            }
          }else {
            this.$message.error(res.msg);
          }
        });
      },
      /**
       * 打开添加部门窗口
       */
      openAddWindow() {
        //清空传递给子组件combotree的值
        this.parentNode = {};
        //清空表单数据
        this.$resetForm("deptForm",this.dept);
        //设置窗口标题
        this.deptDialog.title = "新增部门";
        //显示添加部门窗口
        this.deptDialog.visible = true;
      },

      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      combotreeNodeSelected(selectNode){
          this.dept.parentName = selectNode.departmentName;
          this.dept.pid = selectNode.id;
      }
    }
  }
</script>

<style scoped>
.el-select{
  width:92% !important
}
</style>
